<template>
  <div>
    <!-- 请选择客户 -->
    <el-dialog
      :title="$t('customer.edit.correlationDialog.title')"
      :visible.sync="isClose"
      width="40%"
      @close="GroupClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="saveForm"
        :rules="saveFormRules"
        ref="saveFormRef"
        
        label-position="top"
      >
        <el-form-item :label="$t('customer.edit.correlationDialog.form.name.label')" prop="name">
          <el-input
            v-model="saveForm.name"
            :placeholder="$t('common.placeholder.inputContact')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('customer.edit.correlationDialog.form.phone.label')" prop="phone">
          <el-input v-model="saveForm.phone"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="GroupClosed">{{$t('common.base.cancel')}}</el-button>
        <el-button :loading="isloading" @click="SaveGroup" type="primary">
          {{$t('common.base.confirm')}}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import i18n from '@src/locales'

export default {
  props: {
    isClose: {
      type: Boolean,
      default: false,
    },
    customerId: String,
    conversationId: String,
  },
  data() {
    return {
      isloading: false,
      isGroup: true,
      saveForm: {
        name: "",
        phone: "",
      },
      saveFormRules: {
        name: [
          {
            required: true,
            message: i18m.t('customer.edit.correlationDialog.form.name.rule.require'),
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          { required: true, message: i18m.t('customer.edit.correlationDialog.form.phone.rule.require'), trigger: "blur" },
          { pattern: /^[1]([3-9])[0-9]{9}$/, message: i18m.t('customer.edit.correlationDialog.form.phone.rule.format') },
        ],
      },
      CustomerList: [],
    };
  },
  methods: {
    GroupClosed() {
      this.$emit("CustomerClose");
    },
    SaveGroup() {
      this.$refs.saveFormRef.validate(async (valid) => {
        if (!valid) return;
        const params = this.saveForm;
        params.customerId = this.customerId;
        params.conversationId = this.conversationId;
        try {
          this.isloading = true;
          const { status, message } = await this.$http.post(
            "/linkman/save4Dialog",
            params
          );
          this.isloading = false;
          if (status !== 0)
            return this.$platform.notification({
              title: this.$t('common.base.saveFail'),
              message: message || "",
              type: "error",
            });
          this.$refs.saveFormRef.resetFields();
          this.$platform.notification({
            title: this.$t('common.base.saveSuccess'),
            type: "success",
          });
          // 页面刷新
          this.$emit("CustomerClose", true);
        } catch (e) {
          this.isloading = false;
          console.error(e);
        }
      });
    },
  },
  computed: {
    isWeChat() {
      return this.source == "weChat";
    },
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.options {
  width: 100%;
  height: 52px;
  display: flex;
  box-sizing: border-box;
  transition: background 0.5s;
  align-items: center;
  padding: 0 19px;
  .options-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 50%;
    background: $color-primary-light-6;
  }
  .options-content {
    height: 100%;
    .options-content-name {
      height: 50%;
      display: flex;
      font-size: 14px;
      font-weight: 400;
      color: #595959;
    }
    .options-content-Number {
      height: 50%;
      display: flex;
      font-size: 12px;
      font-weight: 400;
      color: #8c8c8c;
    }
  }
}
.options:hover {
  background: $color-primary-light-1;
}
</style>